I have a React app that mapping cards and each card have unique id although I'm getting error in console that some are not unique:
Warning: Encountered two children with the same key,
2294264. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
Here is the code for building my card structure:
function CreateCards(doc) {
return (
<SimpleCard
key={doc.newsid}
theCardId={doc.newsid}
categorietitle={doc.categorietitle}
newstitle={doc.newstitle}
date={format(new Date(doc.date), "dd/MM/yyyy")}
thenews={doc.thenews}
newsurl={doc.newsurl}
/>
);
}
And here is the code for mapping the cards:
<div className="general-card1">
{this.state.noPlaceFound ? (
<h3 className="noPlaceFound">
<i className="fas fa-exclamation-circle fa-sm WarnIcon"></i>
لا يوجد نتائج
</h3>
) : (
this.state.WasMap.map((v) => CreateCards(v._source))
)}
</div>
Can you please help me?
It is because when you render a list of components in a map(), each component should have a unique key property. It is for React to distinct them. What you did wrong is that you added the key inside the component, where it should be when rendering inside map().
Notice that
key = {index}. This would work for most cases, but it's better to use a customid(you could replaceindexwithv._source.newsidif this is an unique field).
<div className="general-card1">
{this.state.noPlaceFound ? (
<h3 className="noPlaceFound">
<i className="fas fa-exclamation-circle fa-sm WarnIcon"></i> لا يوجد نتائج
</h3>
) : (
this.state.WasMap.map((v, index) => <CreateCards doc={v._source} key={index} />)
)}
</div>